<template>
	<view class="custom-nav-wrapper">
		<view class="custom-nav" :class="isShowBg ? 'bg':''" :style="{ background: stylebg}">
			<view class="container" :class="isBlack ? 'black':'white'">
				<view class="left">
					<img v-show="isShowLeft" class="icon" src="/schoolCube/static/svg/left.svg" alt="" @click="goBack">
				</view>
				<view class="center">{{title}}</view>
				<view class="right"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "custom-nav",
		props: {
			title: {
				type: String,
				default: ''
			},
			isShowLeft: {
				type: Boolean,
				default: false
			},
			isBlack: {
				type: Boolean,
				default: false
			},
			isShowBg: {
				type: Boolean,
				default: true
			},
			stylebg: {
				type:String,
				default:''
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回的页面数，默认值为 1
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.custom-nav-wrapper {
		width: 100%;
		height: 100rpx;
	}

	.custom-nav {
		width: 100%;
		height: 250rpx;
		font-family: PingFang SC;
		font-size: 36rpx;
		font-weight: 700;
		/* 自动布局 */
		display: flex;
	}

	.bg {
		background: linear-gradient(180deg, #BBD3FC 0%, rgba(255, 249, 221, 0) 103%);
	}

	.container {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		.left,
		.right {
			width: 100rpx;
		}

		.left {
			display: flex;
			align-items: center;

			.icon {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.center {
			flex: 1;
			text-align: center;
		}
	}

	.black {
		color: #333;
	}

	.white {
		color: #fff;
	}
</style>